<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" th:href="@{/static/ypb/Y-enter/register/enter.css}" href="enter.css">
    <link rel="stylesheet" type="texts" th:href="@{https://www.huangwx.cn/css/sweetalert.css}">


    <link rel="stylesheet" th:href="@{/static/ypb/Y-enter/font_2547172_6kgtepzo81h/iconfont.css}" href="../font_2547172_6kgtepzo81h/iconfont.css">
</head>

<body>
    <!-- 创建封装容器 -->
    <div class="container" id="container">

        <!-- 注册页面 -->
        <div class="form-container sign-up-container">
            <form>
                <h1>注册页面</h1>
                <!-- 公共组件 -->
                <div class="social-container">
                    <a href="https://gitee.com/oauth/authorize?client_id=f0983305363b7ecf81d6bb12844114c4e250688d1e7811dcbe6bbece913b2f7e&redirect_uri=http://localhost:8080/future/callback&response_type=code&state=1"><i class="iconfont icon-gitee1"></i></a>
                </div>
                <input type="text" name="userHao" id="userHao" placeholder="账号" autocomplete="off">
                <span class="account">*请输入数字最多8位</span>
                <input type="password" name="userPwd" id="userPwd"  placeholder="密码" autocomplete="off">
                <span class="cipher">*请输入密码由8~12位数字和字母组成</span>
                <input type="text" name="userEmail" id="userEmail" placeholder="邮箱" autocomplete="off">
                <span class="Mail"></span>
                <input type="text" name="code" id="code" placeholder="验证码" autocomplete="off">

                <button type="button" id="btnVerify" style="display:block">获取验证码</button>
                <span class="wait" style="display:none"><p class="second"></p>秒后重新发送</span>
                <button class="register" type="button">注册</button>
            </form>
        </div>

        <!-- 登录页面 -->
        <div class="form-container sign-in-container">
            <form>
                <h1>登录页面</h1>
                <!-- 公共组件 -->
                <div class="social-container">
                    <a href="https://gitee.com/oauth/authorize?client_id=f0983305363b7ecf81d6bb12844114c4e250688d1e7811dcbe6bbece913b2f7e&redirect_uri=http://localhost:8080/future/callback&response_type=code&state=1" class="third"><i class="iconfont icon-gitee1"></i></a>
                </div>
                <input type="text" name="userHao" id="Hao" placeholder="账号" autocomplete="off" >
                <input type="password" name="userPwd" id="Pwd" placeholder="密码" autocomplete="off">
                <a href="#" class="forget">忘记密码</a>
                <button class="enter" type="button">登录</button>
            </form>
        </div>

        <!-- 覆盖容器 -->
        <div class="overlay-container">
            <div class="overlay">
                <!-- 覆盖左边  -->
                <div class="overlay-penal overlay-left-container">
                    <h1>welcome back!</h1>
                    <p>To keep connected with us please login with your personal info</p>
                    <button class="ghost" id="signIn">登录</button>
                </div>
               <!-- 覆盖右边 -->
                <div class="overlay-penal overlay-right-container">
                    <h1>Hello Friend!</h1>
                    <p>Enter your personal details and start journey with us</p>
                    <button class="ghost" id="signUp">注册</button>
                </div>
            </div>
        </div>
    </div>
<!--忘记密码弹窗-->
<!--    用户账号-->
<div class="forgetMi" id="forgetMi_1" style="display: none">
    <div class="close">x</div>
    <h3 class="youFind">找回密码</h3>
    <p class="needFind">请输入需要找回密码的账号</p>
    <input type="email" name="throughEmail" class="throughEmail" placeholder="用户账号" required>
    <button class="btnNext" id="btnNext_1">下一步</button>
</div>
<!--邮箱验证-->
    <div class="forgetMi" id="forgetMi_2" style="display: none">
        <div class="close">x</div>
        <h3 class="youFind">找回密码</h3>
        <p class="emailYan">通过邮箱进行验证</p>
        <input type="email" name="throughEmail" class="throughEmail throughEmail_2" placeholder="用户邮箱" th:value="${session.userEmail}">
        <input type="text" class="userEmail" placeholder="验证码">
        <button class="getCode">获取验证码</button>
        <span class="wait_3" style="display:none"><p class="second_2"></p></span>
        <button class="btnNext" id="btnNext_2">下一步</button>
    </div>
<!--修改密码-->
    <div class="forgetMi" id="forgetMi_3" style="display: none">
        <div class="close">x</div>
        <h3 class="youFind">找回密码</h3>
        <p class="emailYan">请输入新密码</p>
        <input type="password" name="throughEmail" class="throughEmail throughEmail_3" placeholder="第一次输入新的密码">
        <p class="again">请再次输入新密码</p>
        <input type="password" class="userEmail userEmail_2" placeholder="第二次输入新的密码">

        <button class="btnNext" id="btnNext_3">下一步</button>
    </div>


</body>

<script th:src="@{/static/ypb/Y-enter/register/enter.js}"></script>
<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js}"></script>

</html>